<template>
  <div class="form-action">
    <el-button
      v-for="(item, index) in getActions"
      :key="`${item.label}-${index}`"
      v-bind="
        Object.keys(item)
          .filter((key) => key != 'onClick')
          .reduce((obj, key) => {
            obj[key] = item[key]
            return obj
          }, {})
      "
      @click="item.onClick"
    >
      {{ item.label || '' }}
    </el-button>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { isBoolean } from '@/utils/is'

interface ActionItem {
  label?: string
  onClick?: () => void
  ifShow?: boolean
  [key: string]: any
}

defineOptions({ name: 'FormAction' })

const props = defineProps<{ actions: ActionItem[] }>()

const isIfShow = (item: ActionItem): boolean => {
  const ifShow = item.ifShow
  let isIfShow = true
  if (isBoolean(ifShow)) {
    isIfShow = ifShow
  }
  return isIfShow
}

const getActions = computed(() => {
  return (props.actions || []).filter((item) => isIfShow(item))
})
</script>
<style scoped>
.form-action {
  margin-left: 10px;
  display: inline-flex;
  flex-wrap: wrap;
}
</style>
